<template>
  <div class="page flex-col">
    <div class="group_log1 flex-col">
      <img class="image-wrapper_log1" referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/b93bb58f136cb96a065c9adf2a122c71" />
    </div>
    <div class="image_log1 flex-col">
      <div class="box_log18 flex-col">
        <div class="group_log11 flex-row justify-between">
          <div class="group_log3 flex-col">
            <span class="text_log1">首页</span>
            <div class="text-wrapper_log1 flex-col">
              <span class="text_log2">公告资讯</span>
            </div>
          </div>
          <span class="text_log3">进入课堂</span>
        </div>
        <div class="box_log7 flex-col">
          <span class="text_log7">证书查询</span>
          <div class="text-wrapper_log4 flex-col">
            <span class="text_log8">帮助中心</span>
          </div>
        </div>
        <div class="text-wrapper_log5 flex-col">
          <span class="text_log9">个人中心</span>
        </div>
      </div>
      <div class="group_log2 flex-col">
        <img class="image_log5" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/8c40c28d5f5b97fd59c7c9a3b198e221" />
        <img class="image_log14" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/5ac8edaf8c6494fdc58dbeb5604c96c1" />
        <div class="box_log2 flex-col">
          <div class="box_log19 flex-row justify-between">
            <img class="image_log6" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/10f5334006783e2a131352e2e07a55db" />
            <div class="text-wrapper_log2 flex-col">
              <span class="text_log4">登录/注册</span>
            </div>
          </div>
          <div class="image-wrapper_log10 flex-row">
            <img class="image_log7" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/9c5aa0fcc7efd1296fe65107360c0218" />
            <img class="image_log8" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/e559acda0f8827036f7302d49155dcdd" />
            <img class="image_log9" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/f61cbcf64c4aadbce9bf8581b0435297" />
            <img class="image_log10" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/f4842ebfa2ab6960c7e24f5b1d39ec05" />
          </div>
          <div class="box_log4 flex-row">
            <img class="image_log11" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/81a612af83d5b718a49200da0fa4606f" />
            <span class="text_log5">自治区线上培训AI课堂</span>
            <img class="image_log12" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/e943e1077b3b79c61e76dd688aa597d0" />
          </div>
          <div class="box_log5 flex-col">
            <div class="image-wrapper_log11 flex-row">
              <img class="label_log1" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/c48ddbdab3506b7070b7d4c3c4361060" />
            </div>
            <div class="box_log20 flex-row justify-between">
              <img class="image_log13" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/cbdc466d012179a0431dc0eec566976f" />
              <div class="section_log1 flex-col">
                <div class="image-wrapper_log12 flex-row">
                  <img class="thumbnail_1" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/5a16368161932876ca5a4aa5c698584d" />
                </div>
                <div class="text-wrapper_log12 flex-row">
                  <span class="text_log6">想问什么尽管戳我</span>
                </div>
                <div class="image-wrapper_log13 flex-row">
                  <img class="label_log2" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/c1c776b271ccc542a9ea3b2b3ae80883" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <img class="image_log3" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/06f2c509f5c01c1b221191ca42985090" />
        <img class="image_log2" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/fc9d717fc77234992de71c9904646c72" />
        <img class="image_log4" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/fed86ce83b4b0b4f1d0b7c1073b4d53e" />
        <div class="image-wrapper_log7 flex-col">
          <img class="label_log3" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/6ce97b7e99d21317901f64a29caa89c2" />
        </div>
      </div>
    </div>
    <div class="group_log5 flex-col" v-if="true">
      <div class="section_log2 flex-col">
        <div class="text-wrapper_log13 flex-row justify-between">
          <span class="text_log10">登录</span> <span class="text_log11">注册</span>
        </div>
        <div class="box_log8 flex-col"></div>
        <div class="box_log9 flex-col">
          <div class="block_log1 flex-row">
            <img class="label_log4" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/0359df4eb2f1794c530151d734eeaed1" />
            <el-input v-model="username" class="text_log12" placeholder="请输入用户名/手机号" />
          </div>
        </div>
        <div class="box_log10 flex-col">
          <div class="group_log6 flex-row">
            <img class="label_log5" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/07d3a83c38c83f663e0fa97b0bf72813" />
            <el-input v-model="password" class="text_log12" placeholder="请输入密码" type="password" />
          </div>
        </div>
        <div class="group_log12 flex-row">
          <div class="box_log12 flex-col"></div>
          <span class="text_log14">记住密码</span>
          <span class="text_log15">忘记密码？</span>
        </div>
        <div class="text-wrapper_log7 flex-col" @click="jumpToMain">
          <span class="text_log16">登&nbsp;录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import debounce from 'lodash/debounce';
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    jumpToMain() {
      this.$router.push('/anmain');
    }
  },
  created() {
    console.group('创建实例之后');
    console.log('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
  },
  mounted() {
    //修复加载的旋转圆圈位置下移
    console.log('mounted==>>')

  },
  watch: {
    $route(to, from) {

    }
  }
}
</script>

<style>
@import './common.css';

.page {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
}

span {
  caret-color: transparent;
}

.group_log1 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/35cc2c7b4253cebb94e27c15f5230638) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.image-wrapper_log1 {
  width: 100%;
  height: 20.99vw;
  margin-top: 35.27vw;
}

.image_log1 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/6d44780e1da37fdcebc0f61d3e21b14a) -17.61vw -8.03vw no-repeat;
  background-size: 135.15vw 73.38vw;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.box_log18 {
  position: relative;
  width: 100%;
  height: 9.54vw;
  margin-top: 46.78vw;
}

.group_log11 {
  width: 74.85vw;
  height: 4.38vw;
  margin: 1.77vw 0 0 20.36vw;
}

.group_log3 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/f903e7dea579af5a31ddaefecc5ad02e) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.23vw;
  position: relative;
}

.text_log1 {
  width: 3.03vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 5.1vw;
}

.text-wrapper_log1 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/18e91db06585a54e53ad273dc9f7f66e) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.23vw;
  position: absolute;
  left: 11.46vw;
  top: 0;
}

.text_log2 {
  width: 6.25vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.text_log3 {
  width: 6.15vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 0.89vw;
  margin-top: 2.4vw;
}

.box_log7 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/63cb5424d635c82c2cbba1d0dd846d87) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.49vw;
  position: absolute;
  left: 43.29vw;
  top: 1.72vw;
}

.text_log7 {
  width: 6.2vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.64vw;
}

.text-wrapper_log4 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/58e6cd7cc16c428acc4136580a6b90e1) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.23vw;
  position: absolute;
  left: 11.72vw;
  top: 0.06vw;
}

.text_log8 {
  width: 6.25vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.text-wrapper_log5 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/5a67649e20c6c37f09a676751f0e96ae) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.29vw;
  position: absolute;
  left: 66.41vw;
  top: 1.78vw;
}

.text_log9 {
  width: 6.31vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.group_log2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 46.78vw;
  background: url(https://lanhu-oss.lanhuapp.com/86cf1bba022608c55a3052264f650eba) -0.47vw -9.95vw no-repeat;
  background-size: 100.98vw 56.71vw;
}

.image_log5 {
  width: 100%;
  height: 17.04vw;
}

.image_log14 {
  width: 100%;
  height: 4.22vw;
  margin: 23.59vw 0 1.92vw 0;
}

.box_log2 {
  position: absolute;
  left: 3.23vw;
  top: 0.06vw;
  width: 93.75vw;
  height: 35.06vw;
  background: url(https://lanhu-oss.lanhuapp.com/ca7f61644f3cc3978f83b8dae81fc6ff) 100% no-repeat;
  background-size: 100% 100%;
}

.box_log19 {
  width: 57.92vw;
  height: 3.75vw;
  margin: 4.84vw 0 0 34.37vw;
}

.image_log6 {
  width: 24.74vw;
  height: 1.2vw;
  margin-top: 0.84vw;
}

.text-wrapper_log2 {
  border-radius: 15px;
  height: 3.75vw;
  border: 2px solid rgba(27, 225, 255, 1);
  width: 10.63vw;
}

.text_log4 {
  width: 6.83vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: AlibabaPuHuiTiM;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 1.14vw 0 0 1.92vw;
}

.image-wrapper_log10 {
  width: 87.92vw;
  height: 15.16vw;
  margin: 2.91vw 0 8.38vw 2.81vw;
}

.image_log7 {
  width: 23.65vw;
  height: 14.17vw;
  margin-top: 0.53vw;
}

.image_log8 {
  width: 18.03vw;
  height: 12.14vw;
  margin: 1.51vw 0 0 1.25vw;
}

.image_log9 {
  width: 18.49vw;
  height: 12.35vw;
  margin: 1.4vw 0 0 1.45vw;
}

.image_log10 {
  width: 23.81vw;
  height: 15.16vw;
  margin-left: 1.25vw;
}

.box_log4 {
  position: absolute;
  left: -2.34vw;
  top: -0.05vw;
  width: 98.13vw;
  height: 6.46vw;
  background: url(https://lanhu-oss.lanhuapp.com/4aba74ed97608c1d73e57e2ba0fbc880) 0vw -0.32vw no-repeat;
  background-size: 98.07vw 6.71vw;
}

.image_log11 {
  width: 10.99vw;
  height: 3.08vw;
  margin: 0.57vw 0 0 1.82vw;
}

.text_log5 {
  text-shadow: 0px 4px 0px rgba(0, 142, 163, 0.7);
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 49.682617%,
      rgba(27, 225, 255, 1) 99.682617%,
      rgba(27, 225, 255, 1) 100%);
  width: 31.15vw;
  height: 2.97vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 3.12vw;
  font-family: AlibabaPuHuiTiB;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 2.82vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1.35vw 0 0 20.57vw;
}

.image_log12 {
  width: 14.54vw;
  height: 3.49vw;
  margin: 1.19vw 3.07vw 0 15.98vw;
}

.box_log5 {
  height: 24.07vw;
  background: url(https://lanhu-oss.lanhuapp.com/6b9cd7b43e07be8ef437d8f7633d4721) 100% no-repeat;
  background-size: 100% 100%;
  width: 46.31vw;
  position: absolute;
  left: 23.29vw;
  top: 24.43vw;
}

.image-wrapper_log11 {
  width: 1.31vw;
  height: 1.2vw;
  margin: 2.65vw 0 0 44.58vw;
}

.label_log1 {
  width: 1.31vw;
  height: 1.2vw;
}

.box_log20 {
  width: 28.18vw;
  height: 16.25vw;
  margin: 0.31vw 0 3.64vw 16.56vw;
}

.image_log13 {
  width: 13.7vw;
  height: 15.32vw;
  margin-top: 0.94vw;
}

.section_log1 {
  height: 5.73vw;
  background: url(https://lanhu-oss.lanhuapp.com/01b0f8634587b7971056d3fd4f805696) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.91vw;
}

.image-wrapper_log12 {
  width: 0.63vw;
  height: 0.68vw;
}

.thumbnail_1 {
  width: 0.63vw;
  height: 0.68vw;
}

.text-wrapper_log12 {
  width: 11.05vw;
  height: 1.36vw;
  margin: 0.88vw 0 0 1.4vw;
}

.text_log6 {
  width: 11.05vw;
  height: 1.36vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.image-wrapper_log13 {
  width: 1.46vw;
  height: 1.41vw;
  margin: 1.35vw 0 0.05vw 2.81vw;
}

.label_log2 {
  width: 1.46vw;
  height: 1.41vw;
}

.image_log3 {
  position: absolute;
  left: 94.22vw;
  top: 16.2vw;
  width: 5.42vw;
  height: 5.94vw;
}

.image_log2 {
  position: absolute;
  left: 0.32vw;
  top: 16.2vw;
  width: 5.42vw;
  height: 5.94vw;
}

.image_log4 {
  position: absolute;
  left: 89.48vw;
  top: 43.91vw;
  width: 5.37vw;
  height: 5.37vw;
}

.image-wrapper_log7 {
  height: 6.72vw;
  background: url(https://lanhu-oss.lanhuapp.com/627b4a6485625dec0383bbaf959beaa0) 100% no-repeat;
  background-size: 100% 100%;
  width: 6.72vw;
  position: absolute;
  left: 88.81vw;
  top: 43.23vw;
}

.label_log3 {
  width: 2.56vw;
  height: 2.5vw;
  margin: 2.13vw 0 0 2.08vw;
}

.group_log5 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/2d0d0ad4ef97a0a297a96cd6a4d652fe) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.section_log2 {
  width: 46.31vw;
  height: 32.24vw;
  background: url(https://lanhu-oss.lanhuapp.com/3166611839ead534953debdbdeee684a) 100% no-repeat;
  background-size: 100% 100%;
  justify-content: flex-center;
  margin: 12.96vw 0 0 26.87vw;
}

.text-wrapper_log13 {
  width: 19.17vw;
  height: 1.72vw;
  margin: 4.37vw 0 0 13.48vw;
}

.text_log10 {
  width: 3.55vw;
  height: 1.72vw;
  overflow-wrap: break-word;
  color: rgba(27, 225, 255, 1);
  font-size: 1.87vw;
  font-family: AlibabaPuHuiTiM;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.text_log11 {
  width: 3.55vw;
  height: 1.72vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.87vw;
  font-family: AlibabaPuHuiTiM;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.box_log8 {
  background-color: rgba(27, 225, 255, 1);
  border-radius: 2px;
  width: 3.34vw;
  height: 0.21vw;
  margin: 0.98vw 0 0 13.59vw;
}

.box_log9 {
  background-color: rgba(27, 225, 255, 0.1);
  border-radius: 7px;
  height: 3.81vw;
  width: 27.45vw;
  margin: 2.81vw 0 0 9.37vw;
}

.block_log1 {
  border-radius: 7px;
  width: 27.56vw;
  height: 3.91vw;
  border: 1.0416666666666667px solid rgba(27, 225, 255, 0.6);
  margin: -0.05vw 0 0 -0.05vw;
}

.label_log4 {
  width: 1.41vw;
  height: 1.62vw;
  margin: 1.14vw 0 0 1.51vw;
}

.text_log12 {
  width: 13.86vw;
  height: 2.41vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.36vw;
  margin: 0.7vw 9.32vw 0 1.45vw;
}

.box_log10 {
  background-color: rgba(27, 225, 255, 0.1);
  border-radius: 7px;
  height: 3.81vw;
  width: 27.45vw;
  margin: 1.14vw 0 0 9.37vw;
}

.group_log6 {
  border-radius: 7px;
  width: 27.56vw;
  height: 3.91vw;
  border: 1.0416666666666667px solid rgba(27, 225, 255, 0.6);
  margin: -0.05vw 0 0 -0.05vw;
}

.label_log5 {
  width: 1.57vw;
  height: 1.78vw;
  margin: 1.14vw 0 0 1.45vw;
}

.text_log13 {
  width: 7.24vw;
  height: 1.31vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.36vw;
  margin: 1.3vw 15.93vw 0 1.35vw;
}

.group_log12 {
  width: 27.45vw;
  height: 1.15vw;
  margin: 1.19vw 0 0 9.42vw;
}

.box_log12 {
  border-radius: 3px;
  width: 1.15vw;
  height: 1.15vw;
  border: 0.8px solid rgba(27, 225, 255, 1);
}

.text_log14 {
  width: 4.43vw;
  height: 1.05vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.04vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.05vw;
  margin-left: 0.73vw;
}

.text_log15 {
  width: 5.06vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(27, 225, 255, 1);
  font-size: 1.04vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.05vw;
  margin: 0.05vw 0 0 16.09vw;
}

.text-wrapper_log7 {
  cursor: pointer;
  background-color: rgba(27, 225, 255, 1);
  border-radius: 7px;
  height: 3.81vw;
  width: 27.45vw;
  margin: 2.91vw 0 4.32vw 9.37vw;
}

.text_log16 {
  width: 4.02vw;
  height: 1.67vw;
  overflow-wrap: break-word;
  color: rgba(1, 27, 63, 1);
  font-size: 1.71vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.72vw;
  margin: 0.88vw 0 0 11.66vw;
}

/* 去除背景 */
.el-input__wrapper {
  background-color: transparent;
  /* 设置背景色为透明 */
  border: none;
  /* 去除边框 */
  box-shadow: none;
  /* 去除阴影 */
}

/* 如果你想要当鼠标悬浮时也去除效果 */
.el-input__wrapper:hover {
  border: none;
  box-shadow: none;
}

.el-input__inner {
  color: white;
  letter-spacing: 2px;
}
</style>
